<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="root61">
<head>
	<%@include file="/views/common/include/taglib.jsp"%>
	<%@include file="/views/common/include/head.jsp"%>
	<link type="text/css" rel="stylesheet" href="${ctx}/css/dlifestyle/header.css" />
	<link type="text/css" rel="stylesheet" href="${ctx}/css/dlifestyle/selectcell.css" />
</head>
<body class="body" style="margin:0px;">
	<div class="total-head">
	<div class="head">
		<!-- <span class="head-span-logo">LOGO</span> -->
		<span class="head-span-name"><img src="${ctx }/images/login/mainpage.png" style="position:relative;left:6px;vertical-align:middle;"/></span>
		
		    <div class="user">
				<img src="${ctx }/images/system/user.png"/>
				<span>${sessionScope.user_login.loginname}</span>
			</div>
			  <div style="position: absolute;left: 500px;display: none">
             	    <div id="showtime"></div>
              </div>
			<div>
				<img class="navigate-bottom" src="${ctx }/images/system/navigateBottom.png"/>
			</div>
			<div class="exist_blacktheme">
			    <a onclick="exist()">
				    <img class="navigate-bottom-img" src="${ctx }/images/system/exist_blacktheme.png"/>
				    <span class="navigate-bottom-span">退出系统</span>
				</a>
			</div>
		
	</div>
	</div>
<div><img width="100%;" height="300px;" src="${ctx }/images/system/selectcell.jpg"/></div>
<div id="provinceCell" class="provinceCell" >
	<c:if test="${!empty  cellInfos}">
		<c:forEach items="${cellInfos}" var="cellInfo" varStatus="status">
		<div style="width:188px;height:40px;">
				<a class="selected" onclick="chooseProvince('${cellInfo.provinceId}');">
					<div id="provinceId${cellInfo.provinceId}" class="province <c:if test="${status.index == 0 }">selectedProvince</c:if>">
						${cellInfo.provinceName}
					</div>
					<div id="triangle${cellInfo.provinceId}" class="<c:if test="${status.index == 0  }">triangle-bottomleft</c:if>"></div>
				</a>
		</div>
		</c:forEach>
	</c:if>
	<c:if test="${empty  cellInfos}">
	<div>${errorCell }</div>
	</c:if>
</div>
<div style="float:left;width: 55%; margin-right: 15%;">
	<div id="cityCell" class="cityCell">
		<c:if test="${!empty  firstProvince}">
			<c:forEach items="${firstProvince}" var="city" varStatus="status">
					<span id="cityId${city.cityId}" class="city <c:if test="${status.index == 0 }">selectedCity</c:if>"><a onclick="chooseCity('${city.cityId}');">${city.cityName}</a></span>
			</c:forEach>
			<hr>
		</c:if>
	</div>
	<div id="cells" class="cellList">
		<c:if test="${!empty  firstProvince}">
			<c:forEach items="${firstCity}" var="cell" varStatus="status">
					<input id="cellId" type="hidden" value="${cell.id}"/>
					<span class="cells" onclick="chooseCell('${cell.id}');">${cell.cellName}</span>
			</c:forEach>
		</c:if>
	</div>
</div>

</body>
<script type="text/javascript">
		var ctx;
		
		function setCtx(ctx){
			this.ctx = ctx;
		}
		
		function chooseProvince(provinceId){
			$.get(ctx + "/getCityListByProvinceId",
				{
				provinceId : provinceId
				},function(data) {
					data = JSON.parse(data);
					if (data.success) {
						var jsonObj=eval("("+data.obj+")"); 
						var html = "";
						var cellList = "";
						$.each(jsonObj, function (i, item) {
							if(i == 0){
								html += "<span id='cityId" + item.cityId + "' class='city selectedCity'><a onclick='chooseCity("+item.cityId+")'>" + item.cityName + "</a></span>";
							}else{
								html += "<span id='cityId" + item.cityId + "' class='city'><a onclick='chooseCity("+item.cityId+")'>" + item.cityName + "</a></span>";
							}
							if(i == 0){
								for(var j=0;j <item.cells.length;j++){
									cellList += "<input id='cellId' type='hidden' value='" + item.cells[j].id + "'/>";
									cellList += "<span class='cells' onclick='chooseCell(" + item.cells[j].id + ")'>" + item.cells[j].cellName + "</span>";
								}
								$("#cells").html(cellList);
							}
						});
						html += "<hr>";
						$("#cityCell").html(html);
					}
					$("div[id^='provinceId']").removeClass("selectedProvince");
					$("div[id^='triangle']").removeClass("triangle-bottomleft");
					$("#provinceId"+provinceId).addClass("selectedProvince");
					$("#triangle"+provinceId).addClass("triangle-bottomleft");
				});
			}
		
		function chooseCity(cityId){
			$.get(ctx + "/getCellListByCityId",
				{
				cityId : cityId
				},function(data) {
					data = JSON.parse(data);
					if (data.success) {
						var jsonObj=eval("("+data.obj+")"); 
						var html="";
						$.each(jsonObj, function (i, item) {
							html += "<input id='cellId' type='hidden' value='" + item.id + "'/>";
							html += "<span id='" + item.id + "' class='cells' onclick='chooseCell(" + item.id + ")'>" + item.cellName + "</span>";
						});
						$("#cells").html(html);
					}
					$("span[id^='cityId']").removeClass("selectedCity");
					$("#cityId"+cityId).addClass("selectedCity");
				});
			}
		
		function chooseCell(cellId){
			if(cellId != null && cellId != undefined){
				
				$.get(ctx+"/getMenuByRoleId",{
					cellId : cellId
				},function(data){
					data = JSON.parse(data);
					if(data.success){
						location.href = ctx + "/main";
					}else{
						layer.msg(data.msg, {icon: 5});
					}
				});
			}
		}
		
		function exist(){
			layer.confirm('确认注销?', {icon: 3, title:'提示'}, function(index){
			   	$.get("${ctx}/exist",{},function(data){
			   		data = JSON.parse(data);
					if(data.success){
						location.href = "${ctx}";
					}
				});
			    layer.close(index);
			});
		    
		}
		
</script>
<script type="text/javascript">
		var ctx = '${ctx}';
		
		setCtx(ctx);
		
</script>
</html>

